<template>
  <div class="container of-y-s">
    <div class="icon cloud cloud1"></div>
    <div class="icon cloud cloud2"></div>
    <div class="icon cloud cloud3"></div>
    <div class="icon hand"></div>
    <img class="model-mask" :src="require('../assets/images/action1.gif')">
    <div @click="checkImg()" class="icon-upload box box-ac box-jc">选择图片</div>
    <image-cropper ref="imageCropper" :cropperConfig="cropperConfig" :callback="loadImage"></image-cropper>
    <div v-if="base64" class="preview">
      <img ref="modelMask" class="model-mask" :src="require('../assets/images/preview-bg.png')">
      <img :style="{
        'transform': `rotate(${roll}deg)`,
        'transform-origin': this.transCenter
      }" class="model-mask" :src="require('../assets/images/easy.gif')">
      <img class="people" :src="base64" alt="">
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { openToast } from '@/assets/js/tools'
import imageCropper from '@/components/imageCropper'
import lrz from 'lrz'

export default {
  name: 'model1',
  components: {
    imageCropper
  },
  data () {
    return {
      cropperConfig: {
        width: 2,
        height: 3,
        quality: 0.8,
        maxWidth: 624
      },
      modelSize: {
        width: 624,
        height: 1296
      },
      eyeCenter: {
        left: 312,
        top: 732
      },
      scale: 1,
      screenSize: {
        width: 0,
        height: 0
      },
      roll: 0,
      transCenter: '50% 67.284%',
      base64: ''
    }
  },
  computed: mapState({
    activityGuid: 'activityGuid',
    userInfo: 'userInfo'
  }),
  mounted () {
    let doc = document.body || document.documentElement
    this.scale = doc.clientWidth / this.modelSize.width
    this.screenSize = {
      width: doc.clientWidth,
      height: doc.clientWidth / this.modelSize.width * this.modelSize.height
    }
  },
  methods: {
    checkImg () {
      this.$refs.imageCropper.checkPhoto()
    },
    loadImage (data) {
      this.base64 = data
      this.dataLastSet(data)
      this.checkFace(data)
    },
    dataLastSet (base64) {
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=data.last.set`,
        method: 'post',
        data: {
          activity_guid: '0814IFS',
          datas: base64
        }
      }).then(res => {
        if (+res.status === 1) {
        }
      })
    },
    checkFace (base64) {
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=qq.face.detect`,
        method: 'post',
        data: {
          // face_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534488788735&di=20ab9c02eea092cdaeb5f7e291ec2696&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a2e8a46ee23738bd4b31ce586.jpg'
          face_base64: base64.replace(/^data:image\/\w+;base64,/, '')
        }
      }).then(res => {
        if (+res.status === 1) {
          let face = res.data.face_list[0].face_shape
          let mouthCenter = [0, 0]
          face.mouth.forEach(item => {
            mouthCenter[0] += item.x
            mouthCenter[1] += item.y
          })
          mouthCenter[0] = Math.floor(mouthCenter[0] / 22)
          mouthCenter[1] = Math.floor(mouthCenter[1] / 22)
          this.roll = -res.data.face_list[0].roll
          // let transCenter = [312 * this.scale, 872 * this.scale]
          console.log(mouthCenter)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/color.scss';
@import '../assets/css/mixins.scss';
.container{
  width:100%;
  height:100%;
  background-color:#bf90ff;
}
@keyframes cloud {
  50% {
    transform: translateY(-1rem);
  }
  100% {
    transform: translateY(0);
  }
}
.cloud{
  position:absolute;
  left:1rem;
  top:1rem;
  width:2rem;
  height:.97rem;
  background-image: url('../assets/images/cloud.png');
  animation:cloud 2.8s infinite;
}
.cloud2{
  left:3rem;
  top:2.5rem;
  width:1.5rem;
  height:.727rem;
  animation-duration: 3s;
  animation-delay: .3rem;
}
.cloud3{
  left:.2rem;
  top:5rem;
  animation-duration: 3.2s;
  animation-delay: .5rem;
}
@keyframes hand {
  50%{
    transform: scale(.6)
  }
}
.hand{
  position:absolute;
  left:1.5rem;
  top:4rem;
  width:1.65rem;
  height:1.69rem;
  background-image: url('../assets/images/hand.png');
  animation:hand 2s infinite;
}
.preview{
  position:relative;
  width:100%;
  height:100%;
  background-color:#FFF;
  .people,.model-mask{
    display:block;
    width:100%;
    position: absolute;
    bottom:0;
  }
  .model-mask{
    z-index:1
  }
}
.icon-upload{
  position:fixed;
  z-index:2;
  bottom: 1rem;
  left:50%;
  width:3.7rem;
  height:1.02rem;
  font-size:.5rem;
  margin-left:-1.85rem;
  border-radius:1.02rem;
  color:#bf90ff;
  background-color:#ffff00;
}
</style>
